<template>
  <div class="container">
    <div class="loading-wrapper" v-show="showLoading">
      <Loading></Loading>
    </div>
    <div v-show="!showLoading">
      <!-- 应用分发套餐 -->
      <div class="title_handOut">
        <div class="title1">应用分发套餐</div>
        <div class="title2">(不限使用时间，免费每天赠送10次下载)</div>
      </div>
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-for="(item, index) in handOutList" :key="index"
          :class="'out' + ' ' + 'out' + index" @click="checkPrice(index)">
          <div :class="
              'grid-content' +
              ' ' +
              'bg-purple' +
              ' ' +
              'one_item' +
              ' ' +
              'one_item' +
              index
            ">
            <img v-if="index == 1" src="/static/price/taocan_tuijian.png" alt="" class="tuijian">
            <div class="recharge">
              <div class="pay">{{ item.title }}</div>
            </div>
            <div class="number">{{ item.content }} <span>次</span></div>
            <div class="underline">
              <div class="bar"></div>
            </div>
            <div class="content">
              <div class="one_item_title">
                <div class="member">充值特权</div>
              </div>
              <div class="txt_left">
                <div class="one_item_content">
                  <p v-html="item.describe"></p>
                </div>
              </div>
              <div class="price">
                <span style="margin-top: 10px; margin-right: 4px">只需</span>{{ item.price | priceStatus }}
                <span style="margin-top: 10px; margin-left: 4px">元</span>
              </div>
              <div class="box_button" style="margin-top: -18px">
                <el-button class="button" @click="goUrl('/mealPay', 'mealPay', item.code, 2,item.price)">立即购买
                </el-button>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 常见问题 -->
      <div class="title">
        <div class="title1">常见问题</div>
      </div>
      <div class="threa_content">
        <el-row :gutter="20" class="row-bg" justify="space-around">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" v-for="(item, index) in questionList" :key="index">
            <div :class="'threa_item' + ' ' + 'threa_item' + index">
              <div class="threa_item_one">
                <span class="wenhao">?</span>
                <div class="threa_item_title_one">{{ item.question }}</div>
              </div>
              <div class="threa_item_one">
                <img class="threa_item_image" src="/static/price/taocan_wenda.png" />
                <div class="threa_item_title_two">
                  {{ item.answer }}
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
  import filters from "../../utils/filters";
  import Loading from '@/components/common/laoding'
  export default {
    filters: filters,
    //import引入的组件需要注入到对象中才能使用
    components: {
      Loading
    },
    data() {
      //这里存放数据
      return {
        showLoading: true, // 显示loading
        handOutList: [],
        questionList: [{
            question: "上传应用有什么限制？",
            answer: "登陆网站后，点击【我的应用-企业签名】，联系客服即可购买。",
          },
          {
            question: "提交正确的包之后多久可以使用？",
            answer: "正常时间为1-3天，若您需要加急，请联系我们的客服人员。",
          },
          {
            question: "链接安装有效期为多长时间?",
            answer: "签名默认不支持推送通知，如果有特殊需要，请选择客服。",
          },
          {
            question: "链接下载次数限制为多少？",
            answer: "每个安装链接最多下载10000次，每超过10000次重新生成一个新的安装链接。",
          },
        ],
        messageObject: [{
            messageUrl: "../../../static/帮助中心.png",
            text: "上面没有找到需要解答的问题？点击进入帮助中心去寻找吧。",
          },
          {
            messageUrl: "../../../static/客服咨询.png",
            text: "当然，我们也给你配备了24小时的在线客服，欢迎咨询。",
          },
        ],
        type: 2,
        code: null,
        price: ''
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      getList() {
        var params = new URLSearchParams();
        params.append("type", this.type);
        this.$post(this.API.Price_payindex, params).then((res) => {
          this.showLoading = false
          let data = res.data;
          this.handOutList = data;
        });
      },
      goUrl(path, name, code, type) {
        var token_time = sessionStorage["token_time"];
        token_time = parseInt(token_time);
        token_time = token_time + 3600000;
        var now = new Date().getTime();
        if (token_time < now || token_time == undefined || isNaN(token_time)) {
          console.log("未登录");
          this.hasLogin = false;

          //跳转到登录
          sessionStorage.setItem("currentTab_title", "");
          this.$router.push({
            path: "/login",
            name: "login",
          });

          return;
        }

        this.$router.push({
          path: path,
          name: name,
          query: {
            code: code,
            type: this.type,
          },
        });
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getList();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
  };

</script>
<style scoped>
  /* 标题 */
  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 67px 0px 40px 0px;
    font-family: PingFang-SC-Medium, PingFang-SC;
  }

  .title_handOut {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 60px 0px 40px 0px;
    font-family: PingFang-SC-Medium, PingFang-SC;
  }

  .title1 {
    font-size: 40px;
    color: #fff;
  }

  .title2 {
    font-size: 20px;
    color: #ccc;
  }

  /* 应用分发套餐 */
  .img_bg {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom right, #f6cdba 50%, #699d8c 0);

    border-radius: 4px 4px 0px 0px;
  }

  .out0 {
    background-color: #272727;
    background-repeat: no-repeat;
    border-radius: 4px;
    width: 340px;
    height: 560px;
    margin: 0px 20px;
  }

  .recharge {
    font-size: 18px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #fff;
    line-height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
  }

  .pay {
    margin-top: 40px;
  }

  .member {
    color: #fff;
  }

  .underline {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .bar {
    border-bottom: 2px solid #272727;
    width: 354px;
    height: 1px;
    margin-left: 1px;
    margin-top: 10px;
  }

  .number {
    font-size: 40px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ff7f3a;
    line-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }

  .one_item_title {
    font-size: 18px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #000000;
    line-height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
  }

  .txt_left {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .one_item_content {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 240px;
    height: 180px;
  }

  .one_item_content p {
    margin-bottom: 20px;
    margin-top: 20px;
    font-size: 20px;
    font-family: "Heiti SC", "黑体-简";
    font-weight: 500;
    color: #fff;
    line-height: 40px;
    margin-left: 10px;
  }

  .one_item_image {
    margin: 40px 100px;
  }

  .price {
    font-size: 30px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #f65d26;
    line-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
    margin-bottom: 20px;
  }

  .price span {
    font-size: 12px;
    font-family: PingFangSC-Medium, sans-serif;
    font-weight: 500;
    color: #fff;
    line-height: 30px;
  }

  .button {
    width: 280px;
    background-image: linear-gradient(to right, #f59834, #f45610);
    border-radius: 34px;
    margin-bottom: 50px;
    border: none;
  }

  .button>>>span {
    margin: 15px 10px;
    font-size: 26px;
    color: #fff;
    font-weight: 400;
  }

  .box_button {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .out1 {
    background-image: url("/static/price/taocan_vipxz.png");
    background-size: 250px 250px;
    background-position: bottom right;
    background-position-y: 285px;
    background-color: #272727;
    background-repeat: no-repeat;
    border-radius: 4px;
    width: 340px;
    height: 560px;
    margin: 0px 20px;
    position: relative;
  }

  .tuijian {
    position: absolute;
    width: 130px;
    top: -5px;
    left: -8px;
  }

  /* .out1 .pay,
  .out1 .member {
    color: #FFF2DE;
  } */

  .out2 {
    background-image: url("/static/price/taocan_guibinxz.png");
    background-size: 250px 250px;
    background-position: bottom right;
    background-color: #272727;
    background-repeat: no-repeat;
    border-radius: 4px;
    width: 340px;
    height: 560px;
    margin: 0px 20px;
  }

  /* .out2 .pay,
  .out2 .member {
    color: #fff;
  }

  .one_item1 .button {
    background: #434044;
  }

  .one_item1 .button>>>span {
    color: #fff;
  }

  .one_item2 .button {
    background: linear-gradient(90deg, #ffda9e 0%, #e8c78f 100%);
  }

  .one_item2 .button>>>span {
    color: #4b484b;
  }

  .one_item1 .one_item_content p,
  .one_item1 .number {
    color: #966f2d;
  }

  .one_item2 .one_item_content p,
  .one_item2 .number {
    color: #e7c48b;
  }

  .one_item1 .price span {
    color: #4E4D4F;
  }

  .one_item2 .price span {
    color: #fff;
  } */

  .row-bg {
    margin-bottom: 80px;
  }

  /* 常见问题 */
  .threa_item {
    background: #272727;
    box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 15px 20px 40px 20px;
    margin-bottom: 15px;
  }

  .threa_item3:last-child {
    padding: 15px 20px 18px 20px;
  }

  .threa_item_one {
    display: flex;
    margin-top: 15px;
  }

  .wenhao {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    color: #000;
    text-align: center;
    line-height: 20px;
  }

  .threa_item_image {
    width: 20px;
    height: 20px;
  }

  .threa_item_title_one {
    margin-left: 10px;
    font-weight: bold;
    font-size: 16px;
    color: #fff;
  }

  .threa_item_title_two {
    margin-left: 10px;
    color: #c9692a;
    font-size: 16px;
    padding-right: 30px;
  }

  /* 移动端 */
  @media (max-width: 441px) {
    .table_content {
      font-size: 14px;
      margin: 20px;
    }

    table tr th {
      font-size: 14px;
    }
  }

  @media (max-width: 375px) {
    .table_content {
      font-size: 14px;
      margin: 20px;
    }

    table tr th {
      font-size: 14px;
    }
  }

  @media (max-width: 320px) {
    .table_content {
      font-size: 12px;
      margin: 20px;
    }

    table tr th {
      font-size: 12px;
    }
  }

</style>
